import { useState } from 'react'
import './index.scss'
import { useNavigate } from 'react-router-dom'
import { LeftOutline } from 'antd-mobile-icons'
import { RightOutlined } from '@ant-design/icons'

function Tj() {
    const navigate = useNavigate()
    const [activeTab, setActiveTab] = useState(0)

    // 科室数据
    const departmentData: { [key: number]: string[] } = {
        0: [ // 外科
            '中医外科门诊',
            '门诊外一科',
            '门诊外二科',
            '门诊外三科',
            '门诊外四科',
            '神经外科'
        ],
        1: [ // 内科
            '消化内科',
            '内分泌科',
            '肾脏内科',
            '心血管内科'
        ],
        2: [ // 全科门诊
            '全一科门诊',
            '全二科门诊',
            '全三科门诊',
            '全四科门诊'
        ],
        3: [ // 口腔科
            '口腔内科',
            '口腔外科',
            '口腔修复科',
            '口腔正畸科'
        ],
        4: [ // 耳鼻喉科
            '耳科',
            '鼻科',
            '咽喉科',
            '头颈外科'
        ],
        5: [ // 皮肤科
            '皮肤内科',
            '皮肤外科',
            '皮肤美容科',
            '皮肤病理科'
        ],
        6: [ // 妇产科
            '妇科',
            '产科',
            '计划生育科',
            '生殖医学科'
        ],
        7: [ // 骨科
            '创伤骨科',
            '脊柱外科',
            '关节外科',
            '运动医学科'
        ],
        8: [ // 儿科
            '小儿内科',
            '小儿外科',
            '新生儿科',
            '儿童保健科'
        ]
    }

    const tabList = ['外科', '内科', '全科门诊', '口腔科', '耳鼻喉科', '皮肤科', '妇产科', '骨科', '儿科']
    return (
        <div className='kslb'>
            <div className='kslb-top'>
                <span><LeftOutline className='kslb-top-left' onClick={() => navigate(-1)} /></span>
                <span className='kslb-top-title'>科室列表</span>
            </div>
            <div className='kslb-bg'>
                {/* 院区信息卡片 */}
                <div className='kslb-campus-card'>
                    <div className='kslb-campus-icon'>

                    </div>
                    <div className='kslb-campus-content'>
                        <div className='kslb-campus-title'>四川省保健院体检中心</div>
                        <div className='kslb-campus-address'>四川省成都市锦江区画溪路666号</div>
                    </div>
                    <div className='kslb-campus-switch' onClick={() => navigate('/yqlb')}>
                        切换院区 {<RightOutlined />}
                    </div>
                </div>
                {/* 智能客服提示 */}
                <div className='kslb-smart-service'>
                    <div className='kslb-smart-text'>不知道挂什么科,问问智能客服?</div>
                    <div className='kslb-smart-button' onClick={()=>navigate('/znkf')}>去咨询</div>
                </div>
                <div className='kslb-bg-two'>
                    <div className='kslb-search-box'>
                        <div className='kslb-search-icon'>
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <circle cx="11" cy="11" r="8" stroke="currentColor" strokeWidth="2" />
                                <path d="m21 21-4.35-4.35" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                            </svg>
                        </div>
                        <input
                            type="text"
                            className='kslb-search-input'
                            placeholder="可输入科室名称检索"
                        />
                    </div>
                </div>
                <div className='kslb-bg-three'>
                    <div className='kslb-left-tabs'>
                        {tabList.map((tab, index) => (
                            <div
                                key={index}
                                className={`kslb-tab-item ${activeTab === index ? 'active' : ''}`}
                                onClick={() => setActiveTab(index)}
                            >
                                {tab}
                            </div>
                        ))}
                    </div>
                    <div className='kslb-right-content'>
                        <div className='kslb-department-list'>
                            {departmentData[activeTab].map((department, index) => (
                                <div
                                    key={index}
                                    className='kslb-department-item'
                                    onClick={() => {
                                        // 这里可以添加点击科室的处理逻辑
                                        console.log('选择科室:', department)
                                        navigate('/yslb')
                                    }}
                                >
                                    {department}
                                </div>
                            ))}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Tj